<template>
    <div>
        <el-page-header :icon="ArrowLeft">
            <template #title @click="back">
                <span @click="back">返回</span>
            </template>
            <template #content>
                <span class="fs-14"> 保单管理 </span>
                <el-icon style="vertical-align: -3px;">
                    <Right />
                </el-icon>

                <span class="fs-14 cr-blue"> 对账管理 </span>
            </template>
        </el-page-header>

        <!-- 查询表单 -->
        <el-form :inline="true" :model="formInline" class="mt-12  pad-12">
            <el-form-item label="保单号：" class="mb-0" size="large">
                <el-input v-model="formInline.user" placeholder="请输入保单号查询" />
            </el-form-item>
            <el-form-item class="mb-0">
                <el-button type="primary" @click="onSubmit" size="large">查询</el-button>
            </el-form-item>
        </el-form>


        <!-- 保单表格 -->
        <el-table :data="tableData" border style="width: 100%" class="mt-12">
            <el-table-column prop="datetime" label="时间" width="150" />
            <el-table-column prop="policy" label="保单号" />
            <el-table-column prop="insurant" label="投保人" width="100" />
            <el-table-column prop="card" label="投保人生份证号" />
            <el-table-column prop="insured" label="被投保人" width="100" />
            <el-table-column prop="clinic" label="就诊诊所" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="navigateTo(`/clinic/add3?id=${scope.row.id}`)">修改</el-button>

                    <el-button link type="info" @click="dialogTableVisible = true">查看详情<el-icon>
                            <ArrowRight />
                        </el-icon></el-button>
                    <el-dialog v-model="dialogTableVisible" title="保单详情">
                        <div class="flex tf"><span>流水号：{{ datahh.num }}</span><span>保单编号：{{ datahh.bb }}</span></div>
                        <div class="flex tf"><span>患者名称：{{ datahh.hm }}</span><span>患者身份证号：{{ datahh.hsfz }}</span></div>
                        <div class="flex tf"><span>{{ datahh.zs }}</span></div>
                        <el-table :data="project" border style="width: 100%" class="mt-12">
                            <el-table-column prop="pname" label="项目名称" />
                            <el-table-column prop="discount" label="项目折扣" />
                            <el-table-column prop="ucredits" label="本次使用额度" />
                            <el-table-column prop="pcredit" label="剩余可用额度" />
                        </el-table>
                        <div class="flex df">
                            <span>就诊日期：{{ datahh.rq }}</span>
                            <p>应付金额：{{ datahh.yf }}</p>
                            <p class="f-0">实付金额：<span class="color-red">￥0</span></p>
                        </div>
                    </el-dialog>


                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="float-r mt-12">
            <el-pagination layout="prev, pager, next" :total="100" />
        </div>

    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { ArrowLeft, Right, Plus, InfoFilled, ArrowRight } from '@element-plus/icons-vue'

import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadProps, FormInstance, } from 'element-plus'
import { useRoute } from 'vue-router'

// 导入接口
import { billinfo, billlist, billedit, billlst } from '../api';

import { useNavigate } from '../hooks'

const value1 = ref('')

const dialogTableVisible = ref(false)

const formInline = reactive({
    user: '',
})
const datahh = reactive({
    num: 0,
    hm: '',
    hsfz: '',
    bb: 0,
    zs: '',
    rq: '',
    yf: ''
    
})


interface BillInfo {
    datetime: string;
    policy: number;
    insurant: string;
    card: string;
    insured: string;
    clinic: string;
}
interface Project {
    num: number;
    pname: string;
    discount: string;
    ucredits: string;
    pcredit: string;
}


const navigator = useNavigate()
const navigateTo = (url: string) => {
    navigator.navigateTo(url)
}
const back = function () {
    navigator.back()
}

const route = useRoute()
const id = ref(route.query.id)

const tableData = ref()
const project = ref()


// 在生命周期中请求接口，获得数据，展示表格
onMounted(async () => {
    const res = await billinfo({})
    tableData.value = res;
    const reslst = await billlist({})
    project.value = reslst;


    datahh.num = reslst[0].num
    datahh.bb=res[0].policy
    datahh.hm=res[0].insured
    datahh.hsfz=res[0].card
    datahh.rq=res[0].datetime
    datahh.zs=res[0].clinic
    
})

const money = computed(() => {
    return 
})





</script>
  
<style scoped lang="scss">
.tf {
    padding: 0 20px;

    span {
        flex: 1;
    }
}

.df {
    margin-top: 30px;
    width: 100%;

    span {
        flex: 3;
    }

    p {
        color: #000;
        flex: 1;
    }

    .f-0 {
        flex: none;
    }
}
</style>